<template>
    <div class="app-container">
        <div class="cart">
            <el-badge :value="cartNum">
                <el-button icon="el-icon-shopping-cart-1" type="primary" size="medium" class="btn-success" circle @click="cart()"></el-button>
            </el-badge>
        </div>
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">商城产品</p>
        </div>
        <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
            <el-form-item label="产品名称" prop="specificationName">
                <el-input
                    v-model="queryParams.specificationName"
                    placeholder="请输入产品名称搜索"
                    clearable
                    size="small"
                    style="width:230px;"
                    @clear="handleClear"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" class="list-search btn-success" color="#5ED4D4">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="tag-group">
            <span class="tag-group__title">产品分类：</span>
            <el-tag v-for="(item, index) in listName" :key="index" :type="type(index)" effect="plain" closable @click="val => onTagGroup(index, val)" @close="onTagClose(index)">
                {{ item.sortName }}
            </el-tag>
        </div>
        <template v-if="list.length >0 ">
            <el-card v-for="i in list" :key="i.id">
                <div slot="header" class="header">
                    <span>{{ i.sortName }}</span>
                    <el-button class="more" type="text" @click="more(i)">更多</el-button>
                </div>
                <el-row>
                    <el-col :span="4" v-for="(y, index) in i.commodityCollectionDetailVOList" :key="index">
                        <div class="item">
                            <el-carousel trigger="click" :autoplay="false" height="255px" v-if="y.shareFileList.length > 0">
                                <el-carousel-item v-for="item in y.shareFileList" :key="item.id">
                                    <img :src="item.fileUrl" class="image" />
                                </el-carousel-item>
                            </el-carousel>
                            <div class="image itemImg" v-else>暂无图片</div>
                            <p @click="detail(y)">产品名称：{{ y.specificationName }}</p>
                            <p @click="detail(y)">产品价格：{{ y.sellingPrice !== null && y.sellingPrice !== '' ? y.sellingPrice : y.productPrice !== null && y.productPrice !== '' ? y.productPrice : '暂无价格' }}</p>
                            <p @click="detail(y)">产品描述：{{ y.description !== '' && y.description !== null ? y.description : '暂无' }}</p>
                            <el-input-number v-model="y.num" :min="1"></el-input-number>
                            <div class="btn">
                                <el-button size="small" type="primary" class="btn-success" @click="buy(y, 'add')">加入购物车</el-button>
                                <el-button size="small" type="primary" class="btn-success" @click="buy(y, 'buy')">立即申请</el-button>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </template>
        <template v-else>
            <el-card>
                未搜索到数据！
            </el-card>
        </template>
    </div>
</template>

<script>
import { storeList, cartBuy, cartAdd, proCollectionList, cartList } from "@/api/system/basedata/productCollection/productCollection"
import { detailConfig } from "@/api/system/setting/config/config"
export default {
    name: "list",
    data() {
        return {
            // 列表数据
            list: [],
            form: {
                orderType: '1',
                status: "1", 
                approvalStatus: "0", 
                purchaseOrderProductList: []
            },
            // 查询参数
            queryParams: {
                specificationName: undefined,
                sortName: undefined
            },
            listName: [],
            current: -1,
            config: '', // 1 销售订单 0 采购订单
            cartNum: ''
        }
    },
    created() {
        this.getList()
        this.getListName()
        this.getConfig()
        this.getCartList()
    },
    methods: {
        // 获取参数配置详情
        getConfig(){
            detailConfig('generatePurchaseOrder', 'shoppingMall').then(res => {
                if(res.data.length > 0){
                    this.config = res.data[0].ifAllow
                }
            })
        },
        // 获取列表
        getList() {
            storeList(this.addDateRange(this.queryParams)).then(res => {
                this.list = res
            })
        },
        // 获取产品分类
        getListName(){
            proCollectionList().then(res => {
                this.listName = res.rows
            })
        },
        // 获取购物车产品
        getCartList() {
            cartList().then(res => {
                this.cartNum = res.rows.length
            })
        },
        // 更多
        more(i){
            this.$router.push({path:"/store/allProduct", query:{ id: i.id, name: i.sortName }})
        },
        // 立即购买
        buy(y, val){
            let obj = {
                productBasicId: y.productId,
                productBasicCode: y.productCode,
                productBasicName: y.productName,
                productId: y.specificationsId,
                productCode: y.specificationCode,
                productName: y.specificationName,
                specification: y.value1 == '' && y.value1 == null ? '' : y.value1  + y.value2,
                num: y.num,
                unit: y.unit,
                untaxedAmount: y.sellingPrice !== null && y.sellingPrice !== '' ? y.sellingPrice : y.productPrice !== null && y.productPrice !== '' ? y.productPrice : 0,
                amount: Number(y.num) * Number(y.sellingPrice !== null && y.sellingPrice !== '' ? y.sellingPrice : y.productPrice !== null && y.productPrice !== '' ? y.productPrice : 0)
            }
            // console.log(obj)
            this.form.purchaseOrderProductList = []
            this.form.purchaseOrderProductList.push(obj)
            if(val == 'buy'){
                cartBuy(this.form).then(res => {
                    this.$modal.msgSuccess("操作成功!")
                    if(this.config == '0'){
                        this.$router.push({path:"/purchase/purchaseOrder/list"})
                    }else{
                        this.$router.push({path:"/sales/salesOrder/list"})
                    }
                })
            }else{
                cartAdd(obj).then(res => {
                    this.$modal.msgSuccess("添加成功!")
                    this.getCartList()
                })
            }
        },
        // 购物车
        cart(){
            this.$router.push({path:"/store/cart"})
        },
        // 产品详情
        detail(y){
            this.$router.push({path:"/store/detail", query:{ data: y }})
        },
        // detailAll(y){
        //     // console.log(y)
        //     if(y.description){
        //         window.open(y.description, '_blank')
        //     }
        // },
        // 搜索按钮
        handleQuery() {
            this.getList()
        },
        // 清除
        handleClear(){
            this.handleQuery()
        },
        type(index){
            if(index == this.current){
                return 'success'
            }else{
                return 'info'
            }
        },
        // 分类搜索
        onTagGroup(index, val){
            this.current = index
            this.type(index)
            this.queryParams.sortName = val.target.innerText
            this.getList()
        },
        // 
        onTagClose(index){
            this.current = -1
            this.type(index)
            this.queryParams.sortName = undefined
            this.getList()
        }
    }
}
</script>

<style scoped>
.cart{
    position: absolute;
    right: 30px;
    top: 20px;
    z-index: 999;
}
::v-deep .el-card{
    margin-top: 10px;
}
::v-deep .el-input-number--medium{
    width: auto;
    margin-top: 10px;
}
::v-deep .el-card .header{
    display: flex;
    align-items: center;
    justify-content:space-between;
}
::v-deep .el-card .item{
    padding: 0 5px;
}
::v-deep .el-card .more{
    color: #28C6C6;
}
::v-deep .el-card .item .image{
    display: block;
    width: 100%;
    height: 255px;
    overflow: hidden;
    min-height: 255px;
}
::v-deep .el-card .item p{
    padding: 5px 0 0;
    font-size: 14px;
    height: 25px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
::v-deep .el-card .item .itemImg{
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9e9e9;
}
::v-deep .el-card .item .btn{
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
}
.tag-group .el-tag{
    cursor: pointer;
}
.tag-group .el-tag+.el-tag {
    margin-left: 10px;
}
.el-tag--plain.el-tag--success{
    background-color: white;
    border-color: #28C6C6;
    color: #28C6C6;
}
</style>